<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background}">
		<!-- 		<view @click="jumpSearch()">
			<uni-easyinput :disabled="true" suffixIcon="search" placeholder="请输入关键字"></uni-easyinput>
		</view> -->
		<uni-nav-bar fixed left-icon="left" title="书单" @clickLeft="back" />
		<view :scroll-x="true" class="sort-list">
			<view :class="['sort',!listQuery.sort?'active':null]" @click="changeSort(null)">
				全部
			</view>
			<view v-for="(item,index) in sortList" :class="['sort',listQuery.sort==item.id?'active':null]"
				@click="changeSort(item.id)">
				{{item.name}}
			</view>
		</view>

		<scroll-view @scrolltolower="next" :style="{'height':scroll_height+'px !important'}" :scroll-y="true">
			<view style="height: 40rpx;">

			</view>
			<view v-for="(item,index) in bookList" :key="index" class="item" @click="jumpBookList(item.id)">
				<view class="title">
					<uni-tag style="margin-right: 10rpx;" :text="item.sort_text||item.sex+'频'" type="primary" circle>
					</uni-tag>
					{{item.title}}
				</view>
				<view class="time">
					<view>{{dateFormat(item.created_time)}}</view>
					<view style="background-color: #dd524d;color: white;padding: 5rpx 15rpx;border-radius: 999px;">
						{{item.total}}本
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	import {
		getBookList,
		getBookListSort
	} from '../../api/index.js'
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		data() {
			return {
				bookList: [],
				sortList: [],
				listQuery: {
					page: 1,
					limit: 20,
					sort: null
				},
				type: null
			};
		},
		onLoad(e) {
			this.type = e.sex
			getBookListSort({
				sex: e.sex
			}).then(res => {
				this.sortList = res
			})
			this.getBookList()
			this.scroll_height = getApp().globalData.screenHeight - parseInt(RpxToPx(100)) - 44 - getApp()
				.globalData.statusBarHeight
		},
		onShow() {
			if (this.$store.state.theme.themeType === 'dark') {
				uni.setTabBarStyle({
					backgroundColor: 'rgb(24,24,24)'
				})
			} else {
				uni.setTabBarStyle({
					backgroundColor: this.$store.state.theme.navColor
				})
			}

			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},

		methods: {
			changeSort(id) {
				if (this.listQuery.sort == id) return
				this.listQuery.page=1
				this.listQuery.sort = id
				this.end = false
				this.bookList = []
				this.getBookList()
			},
			back() {
				uni.navigateBack()
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			next() {
				this.listQuery.page += 1
				this.getBookList()
			},
			jumpBookList(id) {
				uni.navigateTo({
					url: "../BookList/BookList?id=" + id
				})
			},
			getBookList() {
				if (this.end) {
					uni.showToast({
						icon: "none",
						title: "没有更多书单！"
					})
					return
				}
				uni.showLoading({
					mask: true
				})

				this.listQuery.type = this.type
				getBookList(this.listQuery).then(res => {
					this.bookList = this.bookList.concat(res.results)
					uni.hideLoading()
					if (!res.next) {
						this.end = true
					}
				})
			},
			jumpSearch() {
				uni.navigateTo({
					url: "../search/search",
				})
			},
			PxToRpx(num) {
				return PxToRpx(num)
			},
			RpxToPx(num) {
				return RpxToPx(num)
			}
		}
	}
</script>

<style lang="less">
	.container.dark {

		/deep/.uni-nav-bar-text {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}

		/deep/ .uni-searchbar__box {
			background-color: rgb(24, 24, 24) !important;
		}

		/deep/.uni-searchbar__cancel {
			color: white;
		}

		/deep/.uni-input-input {
			color: white;
		}

		/deep/.uni-icons {
			color: white !important;
		}

		/deep/.uni-input-placeholder {
			color: white !important;
		}
	}

	.container {
		background: var(--background);

		.sort-list {
			width: 100vw;
			white-space: nowrap;
			overflow-x: scroll;
			height: 100rpx;
			display: flex;
			align-items: center;

			.active.sort {
				background-color: #2979ff;
				color: white;
			}

			.sort {
				background: var(--background);
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
				display: inline-block;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
				border-radius: 999px;
				margin-right: 40rpx;
			}
		}

		/deep/.uni-navbar__header {
			background-color: var(--background) !important;
			border: none;
		}

		/deep/.uni-navbar__content {
			border: none;
		}

		/deep/ .uni-easyinput {
			padding: 20rpx;
			box-sizing: border-box;
			color: black !important;
		}

		/deep/.uni-easyinput__content {
			background-color: var(--nav_color) !important;
			border: none;
		}

		/deep/.uni-icons {
			color: black !important;
		}

		/deep/.uni-input-placeholder {
			color: black !important;
		}

		/deep/.uni-input-input {
			color: black !important;
		}

		.item {
			margin: 40rpx 40rpx;
			margin-top: 0;
			padding: 10rpx;
			border-radius: 10rpx;
			background: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);

			.title {
				font-size: 32rpx;
				line-height: 60rpx;
				padding: 5rpx 0;
				color: var(--color-main);
			}

			.time {
				font-size: 24rpx;
				padding: 10rpx 0;
				color: var(--color-second);
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
